<template>
    <div>
        <group>
            <cell
                    title="测试"
                    is-link
                    :border-intent="false"
                    :arrow-direction="showContent001 ? 'up' : 'down'"
                    @click.native="showContent001 = !showContent001">
            </cell>
            <template v-if="showContent001">
                <ul class="notice_list" v-for="(item,index) in data4" :key="index">
                    <li v-for="(item2,index) in item.safeJcSubject" :key="index">
                        <div class="down_div">
                        <label>{{item2.jcSubjectName}} </label>
                        <div class="notice_item">
                            <span class="notice_number">{{item2.safeJcSubjectDetail.length}} </span>
                            <x-icon type="ios-arrow-up" size="22" class="icon-up"></x-icon>
                        </div>
                        </div>
                        <ul class="cList">
                        <li class="clearfix" v-for="(data,index) in item2.safeJcSubjectDetail" :key="index" @click="amend(data)">
                            <p>{{data.jcSubjectContent}} </p>
                            <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
                        </li>
                        </ul>
                    </li>
                </ul>
            </template>
        </group>
    </div>
</template>
<script>
export default {
    data (){
        return {
            showContent001: false,
        }
    },
    props:{
        data4:{
            type:Array,
            default:[]
        },
    },
    mounted(){
        console.log(this.data4,123)
    }
}
</script>
<style lang="less">
   .notice_list {
        >li {
          .down_div{
            justify-content: space-between;
            border-bottom: 1px solid #ebeef2;
            height: 55px;
            padding-right: 20px;
            label {
              display: block;
              float: left;
              height: 54px;
              line-height: 54px;
              font-weight: bold;
            }

            .notice_item {
              float: right;
              .notice_number {
                background: #469b7a;
                color: #fff;
                height: 16px;
                width: 16px;
                border-radius: 50%;
                display: inline-block;
                text-align: center;
                line-height: 16px;
                font-size: 12px;
                margin-top: 19px;
              }

              .vux-x-icon {
                fill: #999;
                float: right;
                margin-top: 16px;
              }
            }
          }
          .cList{
            li{
              justify-content: space-between;
              border-bottom: 1px solid #ebeef2;
              align-items: center;
              display: flex;
              padding: 20px 13px 20px 0;
              font-size: 14px;
              padding-left: 10px;
              p{
                float: left;
                width: calc(100% - 40px);
                line-height: 26px;
              }
              .vux-x-icon {
                fill: #999;
                float: right;
              }
            }
          }
        }
        li:last-child {
          border-bottom: none;
        }
    }
</style>
